<template>
	<view>
		<view class="m-bg-w">
			<view class="u-m-t-30 m-mg-lr" v-if="dataList.length > 0">
				<view class="u-flex u-p-b-20 boxbotttom u-p-t-30" v-for="(item,index) in dataList" :key='index'>
					<view>
						<u--image :src="item.image.split(',')[index] || df" width='100' height='100'></u--image>
					</view>
					<view class="u-m-l-30 w_100">
						<view class="u-flex u-flex-between u-flex-items-center">
							<view class="m-font-b u-font-36 m-line-1">{{ item.name }}</view>
							<view class="u-flex u-flex-x-reverse m-bg-w m-font-b">
								<text :class="item.saletype == '在售' ? 'onShou': item.saletype == '待售' ? 'daiShou' : 'onBu'">{{item.saletype}}</text>
							</view>
						</view>
						<view class="m-c-o u-m-t-6 m-font-b u-font-32 m-c-r">{{ item.commissiontext }}</view>
						<view class="u-flex u-flex-items-center u-m-t-10">
							<!-- <view class="borcor u-m-r-10 m-flex-no">{{item.buildingtype}}</view> -->
							<view class="m-flex-no u-m-r-10 m-c-h m-flex-no">{{ item.areaname }}</view>
							<!-- <view class="u-flex m-c-h m-line-1">
								<text>{{ get_look_two(item.aveprice) }}元/m²</text>
								<text class="m-pf">2</text>
								<text>-{{ get_look_two(item.avepricemax) }}元/m²</text>
								<text class="m-pf">2</text>
							</view> -->
							<view class="m-line-1 m-c-h">
								{{ get_look_two(item.aveprice) }}元/m²-{{ get_look_two(item.avepricemax) }}元/m²
							</view>
						</view>
						<view class="u-flex u-flex-wrap">
							<view class="u-flex u-flex-wrap">
								<view class="u-m-t-10 u-m-r-10" v-if="itm" v-for="(itm, idx) in item.characteristic"
									:key="idx">
									<!-- <u-tag borderColor="#bfbfbf" color="#6b6b6b" :text="itm" plain size="mini"></u-tag> -->
									<text class="boxminwid">{{itm.name}}</text>
								</view>
							</view>
						</view>
						<view></view>
					</view>
				</view>
			</view>
			<list-empty v-else text="暂时没有数据哟!" list="data" :listHighly="listHighly"></list-empty>
		</view>
		<u-back-top :scrollTop="pagescrollTop" top="200"></u-back-top>
		<u-loading-page loading-text="内当家APP" :loading="pageLoad"></u-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
			}
		},
		async onLoad() {
			this.path = 'getProcollection'
			this.params = {
				...this.params,
				pnum: this.pnum
			};
			await this.getList();

			if (this.pageLoad) {
				setTimeout(() => {
					this.pageLoad = false;
				}, 1000);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.onShou {
		width: 100rpx;
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 5rpx;
		background-color: #0e5642;
		color: #fff;
	}

	.onBu {
		width: 100rpx;
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 5rpx;
		background-color: #acaab6;
		color: #fff;
	}
	
	.daiShou{
		width: 100rpx;
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 5rpx;
		background-color: #e39771;
		color: #fff;
	}

	.boxbotttom {
		border-bottom: 1rpx solid #f1f1f1;
	}

	.boxminwid {
		min-width: 80rpx;
		padding: 0 10rpx;
		border-radius: 5rpx;
		height: 40rpx;
		line-height: 38rpx;
		text-align: center;
		border: 1rpx solid #bfbfbf;
		color: #6b6b6b;
	}

	.borcor {
		border: 2rpx solid #0e5642;
		color: #0e5642;
		padding: 0 6rpx;
		height: 40rpx;
		background-color: #f2f2f2;
		line-height: 36rpx;
		border-radius: 5rpx;
	}
</style>